<template>
    <div class="status-ratio w100 common-container">
      <div class="chart-container">
        <div class="chart-title-container">
          <div class="chart-title">总设备数量</div>
          <div class="chart-number">{{total}}</div>
        </div>
        <div class="status-ratio-chart" id="status-ratio-chart"></div>
      </div>
      <!--图表标注-->
      <div class="label-container">
        <div class="label">
          <div class="install"></div>在线设备: {{online}}
        </div>
        <div class="label">
          <div class="online"></div>离线设备: {{offline}}
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'StatusRatio',
  props: {
    online: {
      type: Number,
      default: 0
    },
    offline: {
      type: Number,
      default: 0
    }
  },
  watch: {
    online (n, o) {
      if (n > -1) {
        this.drawPieChart()
      }
    }
  },
  computed: {
    total () {
      return (this.online + this.offline).toLocaleString()
    }
  },
  data () {
    return {
      title: '历史设备在离线比例',
      chart: null
    }
  },
  created () {
    window.addEventListener('resize', this.chartResize)
  },
  mounted () {
    this.drawPieChart()
  },
  destroyed () {
    window.removeEventListener('resize', this.chartResize)
  },
  methods: {
    chartResize () {
      if (!this.chart) {
        return
      }
      this.chart.resize()
    },
    formatRatio (number) {
      // 是否为浮点数
      if (String(number).indexOf('.') > -1) {
        return number.toFixed(2)
      }
      return number
    },
    /**
     * 绘制环形图
     * */
    drawPieChart () {
      // 基于准备好的dom，初始化echarts实例
      const dom = document.getElementById('status-ratio-chart')
      if (!dom) {
        return
      }
      this.chart = this.$echarts.init(dom)
      const online = this.online
      const offline = this.offline
      const onlineRatio = this.formatRatio(((online / (online + offline)) * 100))
      const offlineRatio = this.formatRatio(((offline / (online + offline)) * 100))
      // 绘制图表
      this.chart.setOption({
        backgroundColor: '',
        tooltip: {
          trigger: 'item',
          backgroundColor: '#173D8C',
          formatter: '<div style="color: #69CCFF">{b}</div>' +
            '<div style="color: #fff;">设备占比 : {d} % <br>设备数量 : {c} 台</div>'
        },
        series: [
          {
            name: '在离线比例',
            type: 'pie',
            radius : '60%',
            // avoidLabelOverlap: false,
            label: {
              // 文本标签样式
              normal: {
                textStyle: {
                  color: '#12CEFF'
                }
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 20,
              }
            },
            itemStyle:{
              normal: {
                borderWidth: 5,
                borderColor: '#152E71',
              }
            },
            data: [
              {
                value: online,
                name: `在线设备`
              },
              {
                value: offline,
                name: `离线设备`
              }
            ]
          }
        ],
        // 颜色
        color: [
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: '#179aff'
          }, {
            offset: 1,
            color: '#0054ff'
          }]),
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: '#1bc1ff'
          }, {
            offset: 1,
            color: '#1efff7'
          }])
        ],
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '41%',
            style: {
              text: `${onlineRatio}%`, // TODO
              textAlign: 'center',
              fill: '#333',
              fontSize: 44
            }
          },
          {
            type: 'text',
            left: 'center',
            top: '58%',
            style: {
              text: '在线比例',
              textAlign: 'center',
              fill: '#999',
              fontSize: 15
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .status-ratio {
    height: 382px;
    box-sizing: border-box;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 20px;
    .chart-container {
      position: relative;
      flex: 1;
      .status-ratio-chart {
        width: 100%;
        height: 100%;
      }
      .chart-title-container {
        position: absolute;
        top: 38px;
        .chart-title {
          color: #12CEFF;
          font-size: 12px;
        }
        .chart-number {
          background: linear-gradient(to right, #17B0FF, #1EFEF7);
          -webkit-background-clip: text;
          color: transparent;
          font-size: 32px;
          font-weight: bold;
        }
      }
    }
    /*图表标注*/
    .label-container {
      position: absolute;
      bottom: 20px;
      right: 30px;
      .label {
        color: #12CEFF;
        font-size: 12px;
        div {
          width: 28px;
          height: 10px;
          display: inline-block;
          margin-right: 7px;
          border-radius: 5px;
        }
        .install {
          background: linear-gradient(to right, #179aff, #0054ff);
        }
        .online {
          background: linear-gradient(to right, #1bc1ff, #1efff7);
        }
      }
      .label:first-child {
        margin-bottom: 19px;
      }
    }
  }
</style>
